<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" style="width: 90%">
      <el-form-item label="标案编码">
        <el-input :value="tenderInfo.tenderCode" disabled></el-input>
      </el-form-item>
      <el-form-item label="标案名称">
        <el-input :value="tenderInfo.tenderName" disabled></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="竞标产品">
            <el-select
              v-model="currentProduct"
              placeholder="全部"
              @change="productSelected"
              clearable
            >
              <el-option
                v-for="item in products"
                :key="item.id"
                :value="item.id"
                :label="item.productName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所处轮次">
            <el-tag type="danger">
              {{
                currentProductInfo.round === undefined
                  ? "请选择产品"
                  : currentProductInfo.round + "轮报价"
              }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="this.isShow === true">
        <el-form-item label="产品样例">
          <el-image
            style="width: 150px; height: auto"
            :src="currentProductInfo.imageUrl"
            fit="contain"
          ></el-image>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input
                :value="currentProductInfo.productName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号">
              <el-input
                :value="currentProductInfo.productModel"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="物料编码">
              <el-input
                :value="currentProductInfo.productCode"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位">
              <el-input
                :value="currentProductInfo.productUnit"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当前竞价最高记录</span>
            <el-button
              style="float: right; padding: 3px 0; position: relative"
              type="text"
              @click="showDialog"
              >更多竞价记录</el-button
            >
          </div>
          <div
            v-for="(item, index) in records"
            :key="item.id"
            class="text item"
          >
            <div class="notice-top">
              <svg-icon icon-class="fire" style="margin: 0px 2px 5px 2px" />
              <a class="child"
                >{{ ++index }}、出价：{{ item.price }} （{{ item.bidUnit }}）</a
              >
              <a class="child"
                >可提供: {{ item.tenderProvide }} （{{
                  item.bidUnit.replace("/元", "")
                }}）</a
              >
              <el-tag
                class="child"
                type="success"
                style="float: right; margin-left: 10px"
                >{{ item.supplier }}</el-tag
              >
              <el-tag class="child" style="float: right">{{
                item.bidTime
              }}</el-tag>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" v-if="this.isRanking">
          <div slot="header" class="clearfix">
            <span>本轮竞价排名</span>
          </div>
          <div v-if="rankingRecords.length === 0">
            <span>暂无竞价数据</span>
          </div>
          <div
            v-for="(item, index) in rankingRecords"
            v-else
            :key="item.id"
            class="text item"
          >
            <div class="notice-top">
              <svg-icon icon-class="fire" style="margin: 0px 2px 5px 2px" />
              <a class="child"
                >{{ ++index }}、{{ item.supplier }} 出价：{{ item.price }} （{{
                  item.bidUnit
                }}）</a
              >
              <a class="child"
                >可提供: {{ item.tenderProvide }} （{{
                  item.bidUnit.replace("/元", "")
                }}）</a
              >
              <el-tag class="child" style="float: right">{{
                item.bidTime
              }}</el-tag>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" v-if="this.isMinimumPrice">
          <div slot="header" class="clearfix">
            <span>当前最低价</span>
          </div>
          <div v-if="minimumInRound === null">
            <span>暂无本轮最低竞价数据</span>
          </div>
          <div class="text item" v-else>
            <div class="notice-top">
              <el-tag class="child" style="margin-right:10%"> 本轮最低价 </el-tag>
              <a class="child"
                >{{ minimumInRound.supplier }} 出价：{{
                  minimumInRound.price
                }}
                （{{ minimumInRound.bidUnit }}）</a
              >
              <a class="child"
                >可提供: {{ minimumInRound.tenderProvide }} （{{
                  minimumInRound.bidUnit.replace("/元", "")
                }}）</a
              >
              <el-tag class="child" style="float: right">{{
                minimumInRound.bidTime
              }}</el-tag>
            </div>
          </div>
          <div v-if="minimumAllRound === null">
            <span>当前暂无标案产品最低竞价数据</span>
          </div>
          <div class="text item" v-else>
            <div class="notice-top">
              <el-tag class="child" style="margin-right:10%"> 标案最低价 </el-tag>
              <a class="child"
                >{{ minimumAllRound.supplier }} 出价：{{
                  minimumAllRound.price
                }}
                （{{ minimumAllRound.bidUnit }}）</a
              >
              <a class="child"
                >可提供: {{ minimumAllRound.tenderProvide }} （{{
                  minimumAllRound.bidUnit.replace("/元", "")
                }}）</a
              >
              <el-tag class="child" style="float: right">{{
                minimumAllRound.bidTime
              }}</el-tag>
            </div>
          </div>
        </el-card>

        <el-row>
          <el-col :span="12">
            <el-form-item label="输入价格">
              <el-input
                type="number"
                @input="limitInput($event, 'bidPrice')"
                v-model.trim="form.bidPrice"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位">
              <el-input
                :value="'元/' + currentProductInfo.productUnit"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="可供数量">
              <el-input type="number" :min="0" v-model.trim="form.provide" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位">
              <el-input
                :value="currentProductInfo.productUnit"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit">立即竞价</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-empty
      :image-size="200"
      description="请选择竞标的产品"
      v-if="this.isShow === false"
    ></el-empty>

    <Dialog
      :visible="recordsVisible"
      :records="recordsInfos"
      @cancel="cancel"
    />
  </div>
</template>

<script>
import {
  competeTender,
  getCompeteRecords,
  getCompeteRankingRecords,
  getCompeteMinimumPriceRecords,
} from "@/api/supplierTender";
import { getAllCompeteInfos } from "@/api/purchaserTender";
import Dialog from "./Dialog";

export default {
  name: "BidTender",
  components: { Dialog },
  data() {
    return {
      form: {
        bidPrice: 0.0,
        provide: 0,
      },
      currentProduct: "",
      currentProductInfo: {},
      isShow: false,
      records: [],
      timer: null,
      recordsVisible: false,
      recordsInfos: [],
      rankingRecords: [],
      minimumAllRound: {
        price: 0,
        bidUnit: "0",
        tenderProvide: 0,
        bidCount: 0,
        status: 0,
        bidTime: "",
        supplier: "",
      },
      minimumInRound: {
        price: 0,
        bidUnit: "0",
        tenderProvide: 0,
        bidCount: 0,
        status: 0,
        bidTime: "",
        supplier: "",
      },
    };
  },
  props: {
    tenderInfo: {
      type: Object,
      default: {
        tenderName: "",
        tenderCode: "",
        tenderId: "",
      },
    },
    products: {
      type: Array,
    },
    isMinimumPrice: {
      type: Boolean,
    },
    isRanking: {
      type: Boolean,
    },
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    showDialog() {
      this.recordsVisible = true;
      const data = {
        tenderId: this.tenderInfo.tenderId,
        productId: this.currentProduct,
        round: this.currentProductInfo.round,
      };
      getAllCompeteInfos(data).then((res) => {
        if (res.code === 200) {
          this.recordsInfos = res.data;
        }
      });
    },
    productSelected(val) {
      console.log(this.isMinimumPrice);
      this.currentProduct = val;
      if (this.currentProduct === "" || this.currentProduct === undefined) {
        window.clearInterval(this.timer);
        this.currentProductInfo.round = undefined;
        this.timer = null;
        this.isShow = false;
      } else {
        this.currentProductInfo = this.products.filter((p) => p.id === val)[0];
        this.getRecords();
        if (this.isRanking) {
          // isRanking为true就是要显示价格
          this.getRankingRecords();
        }
        if (this.isMinimumPrice) {
          // isMinimumPrice就要显示最低价
          this.getMinimumPrice();
        }
        this.isShow = true;
        // 设置定时器
        // 如果不加 window ，则会使用 vue实例的方法，将无法清除定时器
        this.timer = window.setInterval(() => {
          // 要执行的函数
          this.getRecords();
          if (this.isRanking) {
            this.getRankingRecords();
          }
          if (this.isMinimumPrice) {
            // isMinimumPrice就要显示最低价
            this.getMinimumPrice();
          }
        }, 5000);
      }
    },
    getRecords() {
      const data = {
        tenderId: this.tenderInfo.tenderId,
        productId: this.currentProduct,
        round: this.currentProductInfo.round,
      };
      getCompeteRecords(data).then((res) => {
        if (res.code === 200) {
          this.records = res.data;
        }
      });
    },

    getRankingRecords() {
      const data = {
        tenderId: this.tenderInfo.tenderId,
        productId: this.currentProduct,
        round: this.currentProductInfo.round,
      };
      getCompeteRankingRecords(data).then((res) => {
        if (res.code === 200) {
          this.rankingRecords = res.data;
        }
      });
    },

    getMinimumPrice() {
      const data = {
        tenderId: this.tenderInfo.tenderId,
        productId: this.currentProduct,
        round: this.currentProductInfo.round,
      };
      getCompeteMinimumPriceRecords(data).then((res) => {
        if (res.code === 200) {
          this.minimumAllRound = res.data.minimumAllRound;
          this.minimumInRound = res.data.minimumInRound;
        }
      });
    },

    limitInput(value, name) {
      this.form[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },

    cancel() {
      this.recordsVisible = false;
    },

    onSubmit() {
      const data = {
        supplierId: this.$store.getters.accountId,
        tenderId: this.tenderInfo.tenderId,
        productId: this.currentProduct,
        bidUnit: this.currentProductInfo.productUnit + "/元",
        price: this.form.bidPrice,
        tenderProvide: this.form.provide,
        bidCount: this.currentProductInfo.round,
      };

      competeTender(data).then((res) => {
        if (res.code === 200)
          this.$message.success("成功报价，你可再次报价或等待最终结果！");
        if (this.currentProduct !== "" || this.currentProduct !== undefined) {
          this.getRecords();
          if (this.isRanking) {
            this.getRankingRecords();
          }
          if (this.isMinimumPrice) {
            // isMinimumPrice就要显示最低价
            this.getMinimumPrice();
          }
        }
      });
    },
  },
};
</script>

<style scoped>
/* .notice {
  align-content: center;
} */
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 15px;
}
a {
  position: relative;
  color: #ff5100;
  display: block;
  /* width: 50%; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-top .child {
  display: inline-block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin: 10px;
  height: auto;
  display: inline-block;
}
</style>
